<template>
  <div class="case-manage-container">
    <div class="case-manage-content">
      <div class="case-manage-wrapper">
        
        <div class="apply-form">
          <el-form :model="applyForm" :rules="rules" ref="applyFormRef" label-width="120">
            <el-form-item label="案件类型" prop="caseType">
              <el-select v-model="applyForm.caseType" placeholder="请选择案件类型" style="width: 100%;">
                <el-option label="民事案件" value="CIVIL"/>
                <el-option label="刑事案件" value="CRIMINAL"/>
                <el-option label="行政案件" value="ADMINISTRATIVE"/>
                <el-option label="其他" value="OTHER" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="案件标题" prop="title">
              <el-input v-model="applyForm.title" placeholder="请输入案件标题" />
            </el-form-item>
            
            <el-form-item label="案情描述" prop="description">
              <el-input 
                type="textarea" 
                v-model="applyForm.description" 
                :rows="6"
                placeholder="请详细描述案情..."
              />
            </el-form-item>
            
            <el-form-item label="上传材料">
              <el-upload
                action=""
                :auto-upload="false"
                :on-change="handleFileChange"
                :file-list="fileList"
                multiple
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持jpg/png/pdf/doc/docx格式，单个文件不超过10MB
                  </div>
                </template>
              </el-upload>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitApply">提交申请</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const applyFormRef = ref(null)
const fileList = ref([])

const applyForm = ref({
  caseType: '',
  title: '',
  description: '',
  files: []
})

const rules = {
  caseType: [
    { required: true, message: '请选择案件类型', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入案件标题', trigger: 'blur' },
    { min: 2, max: 50, message: '标题长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入案情描述', trigger: 'blur' },
    { min: 10, max: 1000, message: '描述长度在 10 到 1000 个字符', trigger: 'blur' }
  ]
}

function handleFileChange(file, fileList) {
  console.log('文件变化:', file, fileList)
}

function submitApply() {
  applyFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('案件申请提交成功！')
    } else {
      ElMessage.error('请完善表单信息')
    }
  })
}

function resetForm() {
  applyFormRef.value.resetFields()
  fileList.value = []
}
</script>

<style scoped>
.case-manage-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0 40px 0;
  background: #f6f8fa;
}

.case-manage-content {
  width: 80%;
  max-width: 1200px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 40px 0 24px 0;
  text-align: center;
}

.page-header h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0;
}

.page-description {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

.case-manage-wrapper {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px - 40);
  width: 100%;
  overflow-x: hidden;
}

.apply-form {
  margin-top: 24px;
  flex: 1;
}

.el-upload__tip {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .case-manage-content {
    width: 98%;
    min-width: 0;
  }
  .case-manage-wrapper {
    padding: 16px;
  }
  .page-header {
    padding: 24px 0 16px 0;
  }
}
@media (max-width: 600px) {
  .case-manage-content {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .case-manage-wrapper {
    padding: 8px;
  }
}
</style> 